<template>
  <div>
    <h1>基本信息</h1>
    <el-form ref="form" label-width="80px" class="edit">
      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称 :">
              {{product.name}}
          </el-form-item>
          <el-form-item label="产品线 :">
            {{product.productLine.name}}
          </el-form-item>
          <el-form-item label="品类 :">
            {{product.category.name}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片 :">
            <ul class="picture_type_list">
              <li v-for="image in this.product.productImages">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="image.url"
                  :preview-src-list="srcList">
                </el-image>
              </li>
            </ul>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      -->
      <h1>配置信息</h1>
      <el-row>
        <el-col :span="12">
          <el-form-item label="系列 :">
            {{product.series.name}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="克重 :">
            {{product.weight}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="尺寸 :">
            {{product.size}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色 :">
            {{product.color}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="工艺 :">
            {{product.technology}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="形状 :">
            {{product.shape}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="材质 :">
            {{product.material}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成色 :">
            {{product.purity}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="包装 :">
            {{product.packing}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检验（是否包含证书） :" label-width="190px">
            <el-switch
              class="switch"
              v-model="product.status"
              active-color="#00A854"
              active-text="有"
              :active-value="1"
              inactive-color="#F04134"
              inactive-text="无"
              :inactive-value="0"
              disabled
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用途 :">
            {{product.purpose}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="增值服务 :">
            {{product.service}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" @click="closeSee()" class="btnCloseSee">退出</el-button>
  </div>
</template>

<script>
export default {
  name: "see",
  inject:['reload'],  //注入inject依赖提供刷新
  props:{
    product: Object
  },
  data(){
    return{
      srcList: []
    }
  },
  created() {
    for (let i = 0; i < this.product.productImages.length; i++) {
    this.srcList.push(this.product.productImages[i].url)
    }
    console.log(this.srcList)
  },
  methods:{
    closeSee(){
      //触发自定义事件
      this.$emit('closeSee');
      this.reload();
    }
  }
}
</script>

<style scoped>
@import "../../../assets/css/basicdata.css";

</style>
